<template>
  <div class="accounting-form">
    <el-form class="g-mt11" ref="formRef" label-position="top" :model="formData" :rules="formRules">
      <el-row class="form-container" :gutter="20">
        <el-col :span="6">
          <el-form-item label="因子名称：" prop="factorName">
            <el-input v-model="formData.factorName" placeholder="请输入"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="英文名称：" prop="enName">
            <el-input v-model="formData.enName" placeholder="请输入"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类别：" prop="category">
            <el-select v-model="formData.category" style="width: 100%">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in factorCategoryOption"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="国别：" prop="country">
            <el-select v-model="formData.country" style="width: 100%">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in countryOptions"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="排放因子：" prop="emissionFactor" class="unit-form">
            <el-input
              v-model="formData.emissionFactor"
              placeholder="请输入"
              v-decimal-only:6
              type="number"
              @wheel.stop.prevent
            >
              <template #append>
                <el-form-item prop="factorUnit" class="unit-form">
                  <el-select v-model="formData.factorUnit" style="width: 130px; margin-left: 0px">
                    <el-option
                      :label="item.dataValue"
                      :value="item.dataValue"
                      v-for="item in UnitAllOption"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="基准年：" prop="baseYear">
            <el-date-picker
              style="width: 100%"
              v-model="formData.baseYear"
              value-format="YYYY"
              type="year"
              placeholder="请选择年份"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="核算边界：" prop="boundary">
            <el-select v-model="formData.boundary" style="width: 100%">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in accountBoundaryOptions"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数据来源：" prop="factorDataSource">
            <el-select v-model="formData.factorDataSource" style="width: 100%">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in dataSourceOptions"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="版本：" prop="version">
            <el-input v-model="formData.version" placeholder="请输入"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="附件：" prop="fileList">
            <g-upload
              class="accounting-form-upload"
              :file-size-limit="10"
              :action="fileUploadRequestUrl"
              :limit="100"
              :postParams="{ filePath: 'factor/pcf', needRename: 'false' }"
              v-model:fileList="formData.fileList"
              :on-change="onChange"
              previewByApi
              @success="handleUploadSuccess"
              @remove="handleRemove"
              accept=".pdf, .docx, .xlsx, .jpg, .jpeg, .png"
            >
              <template #default="{ loading: btnLoading }">
                <el-button :loading="btnLoading"
                  ><CIcon type="c-xian-shangchuan" class="g-mr4"></CIcon>上传文件</el-button
                >
              </template>
              <template #tip>
                <div>
                  <span span class="g-font-12n3-2"
                    >*支持.pdf, .docx, .xlsx, .jpg, .jpeg,
                    .png格式文件上传，用于上传报告、文献、现场测量数据等证明材料。最大不超过10M</span
                  >
                </div>
              </template>
            </g-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注：" prop="comment">
            <el-input
              type="textarea"
              v-model="formData.comment"
              placeholder="请输入"
              show-word-limit
              maxlength="255"
              :autosize="{ minRows: 1, maxRows: 3 }"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { defineExpose, defineProps, watch, withDefaults } from 'vue';
import { reactive, ref } from 'vue';
import { fileUploadRequestUrl } from '@/apis/todo/flowBusiness';
import {
  factorCategoryOption,
  dataSourceOptions,
  countryOptions,
  accountBoundaryOptions
} from '@/constants/enum';
import { formRules } from './rules';
import { GUpload } from '@/components/GUpload/index';
import { useMessage } from '@/hooks/useMessage';
import { getBase } from '@/apis/common/common';
import type { IFactorDetail } from '@/apis/todo/model/flowBusinessModel';

const formRef = ref();
const formData = reactive({
  fileList: [] as any[],
  factorName: '',
  enName: '',
  category: '',
  country: '',
  factorUnit: '',
  emissionFactor: '',
  baseYear: '',
  boundary: '',
  factorDataSource: '',
  version: '',
  comment: ''
});
const { createMessage } = useMessage();

interface AuditInfoProps {
  data: IFactorDetail;
}
const props = withDefaults(defineProps<AuditInfoProps>(), {
  data: () => {
    return {} as IFactorDetail;
  }
});

const UnitAllOption = ref([] as any[]);
getBase('footprint:FACTOR_UNIT').then(res => {
  UnitAllOption.value = res ?? [];
});

watch(
  () => props.data,
  info => {
    formData.factorName = info.factorName;
    formData.enName = info.enName;
    formData.category = info.category;
    formData.country = info.country;
    formData.factorUnit = info.factorUnit;
    formData.emissionFactor = info.emissionFactor;
    formData.factorDataSource = info.factorDataSource;
    formData.baseYear = info.baseYear;
    formData.boundary = info.boundary;
    formData.version = info.version;
    formData.comment = info.comment;
    if (info.attachment) {
      formData.fileList = [{ name: info.attachmentName, url: info.attachment }];
    }
  }
);
const flag = ref(true);
const handleUploadSuccess = (file: any) => {
  console.log('handleUploadSuccess', file);
  if (file.response.msg == '成功') {
    createMessage.success('上传成功');
    flag.value = true;
    formRef.value.validateField('fileList');
  } else {
    createMessage.info('上传失败');
    flag.value = false;
  }
  // uploadRef.value?.clearFiles();
};
const onChange = (file: any, fileList: any) => {
  console.log('onChange', fileList);
  if (fileList.length > 1) {
    if (flag.value == true) {
      fileList.splice(0, 1);
    }
  }
};
function handleRemove() {
  if (formData.fileList.length === 0) {
    flag.value = false;
    formRef.value.validateField('fileList');
  }
}

function submit() {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        resolve(formData);
        // createMessage.success('提交成功');
      } else {
        reject();
      }
    });
  });
}
defineExpose({
  submit
});
</script>
<style lang="scss" scoped>
.accounting-form {
  width: 100%;
  .form-container {
    padding: 12px 10px 6px;
    background: #f6f9fa;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
  }
  :deep(.el-form .el-form-item__content) {
    .el-date-editor,
    .el-select {
      width: 100%;
    }
  }

  :deep(.accounting-form-upload.g-upload) {
    position: relative;
    width: 100%;
    .el-upload-list {
      position: absolute;
      right: 0;
      top: 0;
      margin: 0;
      min-width: calc(100% - 120px);
    }
  }
}
.unit-form {
  width: 100%;
  :deep(.el-input-group__append) {
    padding-left: 0;
    padding-right: 0;
    width: 130px;
    .el-select {
      width: 100% !important;
    }
  }
}
</style>
